<template>
  <div class="container-pt">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      fixed
      title="我的文章"
    />
    <van-list
      v-model="isLoading"
      :finished="isFinised"
      finished-text="没有更多了"
      @load="listDatre"
      :error.sync="isError"
      error-text="加载数据错误了"
    >
      <article-list
        :disable-swiper="false"
        v-for="(item, index) in list"
        :key="index + 1"
        :list="item"
      >
        <van-button square type="warning" @click="active = true" text="修改" />
        <van-button square type="danger" text="删除" @click="del(item.id)" />
      </article-list>
    </van-list>
    <van-popup v-model="active" style="height: 100%" position="bottom">
      <van-nav-bar title="修改文章">
        <template #right>
          <van-icon name="close" @click="active = false" size="18" />
        </template>
      </van-nav-bar>
      <article-form></article-form>
    </van-popup>
  </div>
</template>

<script>
import articleList from "@/components/article.vue";
import articleForm from "@/components/article-forms.vue";
import { getArticleListApi, getdelArticleListApi } from "../../api/user";
export default {
  components: { articleList, articleForm },
  data() {
    return {
      active: false,
      list: [],
      page: 1,
      isLoading: false,
      isFinised: false,
      isError: false,
    };
  },
  methods: {
    async listDatre() {
      try {
        const { data } = await getArticleListApi({
          page: this.page,
          limit: 10,
        });
        this.list.push(...data.data);
        // 判断是否结束
        if (this.page >= data.totalPages) {
          this.isFinised = true;
        } else {
          this.page++;
        }
      } catch (error) {
        this.isError = true;
      } finally {
        // 无论成功还是失败都要关闭 loading
        this.isLoading = false;
      }
    },
    async del(id) {
      console.log(id);
      const res = await getdelArticleListApi(id);
      console.log(res);
    },
  },
  created() {
    this.listDatre();
  },
};
</script>

<style>
</style>